<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>键盘布局</title>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<div class="title">按回车结束游戏</div>
		<div class="content"></div>
		<div class="keybord">
			<div class="left">
				<!-- row1 -->
				<li class="tow min">ESC</li>
				<li>F1</li>
				<li>F2</li>
				<li>F3</li>
				<li>F4</li>
				<li class="blank"></li>
				<li>F5</li>
				<li>F6</li>
				<li>F7</li>
				<li>F8</li>
				<li class="blank"></li>
				<li>F9</li>
				<li>F10</li>
				<li>F11</li>
				<li>F12</li>
				<!-- row2 -->
				<li class="tow">~</li>
				<li data-txt="1">1</li>
				<li data-txt="2">2</li>
				<li data-txt="3">3</li>
				<li data-txt="4">4</li>
				<li data-txt="5">5</li>
				<li data-txt="6">6</li>
				<li data-txt="7">7</li>
				<li data-txt="8">8</li>

				<li data-txt="9">9</li>
				<li data-txt="0">0</li>
				<li>-</li>
				<li>+</li>
				<li class="small tow min">BACK</li>
				<!-- row3 -->
				<li class="tow min">TAB</li>
				<li data-txt="Q">Q</li>
				<li data-txt="W">W</li>
				<li data-txt="E">E</li>
				<li data-txt="R">R</li>
				<li data-txt="T">T</li>
				<li data-txt="Y">Y</li>
				<li data-txt="U">U</li>
				<li data-txt="I">I</li>
				<li data-txt="O">O</li>
				<li data-txt="P">P</li>
				<li>[</li>
				<li>]</li>
				<li class="tow">\</li>
				<!-- row4 -->
				<li class="tow min">CAPS</li>
				<li data-txt="A">A</li>
				<li data-txt="S">S</li>
				<li data-txt="D">D</li>
				<li data-txt="F">F</li>
				<li data-txt="G">G</li>
				<li data-txt="H">H</li>
				<li data-txt="J">J</li>
				<li data-txt="K">K</li>
				<li data-txt="L">L</li>
				<li>;</li>
				<li>"</li>
				<li class="three min">ENTER</li>
				<li class="three min">SHFIT</li>
				<!-- row5 -->
				<li data-txt="Z">Z</li>
				<li data-txt="X">X</li>
				<li data-txt="C">C</li>
				<li data-txt="V">V</li>
				<li data-txt="B">B</li>
				<li data-txt="N">N</li>
				<li data-txt="M">M</li>
				<li>,</li>
				<li>.</li>
				<li>?</li>
				<li class="three main">SHIFT</li>
				<!-- row6 -->
				<li class="min">CTRL</li>
				<li class="min">WIN</li>
				<li class="min">REL</li>
				<li class="ninth min">TAB</li>

				<li class="min">RlT</li>
				<li class="min">FN</li>
				<li class="min">LIGHT</li>
				<li class="min">CTRL</li>
			</div>
			<div class="midel">
				<ul class="row row1">
					<li>PRTSECN</li>
					<li>RCRLK</li>
					<li>PRUSE</li>
					<li>INS</li>
					<li>HOME</li>
					<li>PGUP</li>
					<li>DEL</li>
					<li>END</li>
					<li>PGON</li>
				</ul>
				<ul class="row row2">
					<li class="blank"></li>
					<li class="blank"></li>
					<li class="blank"></li>
					<li class="blank"></li>
					<li>↑</li>
					<li class="blank"></li>
					<li>←</li>
					<li>↓</li>
					<li>→</li>
				</ul>
			</div>
			<div class="rigth">
				<li class="blank">*</li>
				<li class="blank">*</li>
				<li class="blank">*</li>
				<li class="blank"></li>
				<li class="min">numlk</li>
				<li>/</li>
				<li>*</li>
				<li>-</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li class="rightBack">+</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>

				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li class="rightBack min">BACK</li>
				<li class="tow">0</li>
				<li>.</li>
			</div>
		</div>
		<script src="index.js"></script>
		<script>
			window.addEventListener('load', function () {
				const keybord = new Keybord('.keybord')
				document.addEventListener('keyup', function () {
					const result = keybord.result
					document.querySelector(
						'.content'
					).innerHTML = `打字速度为${that.result.spped}/分,一共练习了${that.total}次,打错${that.result.erroeNums},正确率${that.result.RightRat}% `
				})
			})
		</script>
	</body>
</html>
